import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { NavBar, Icon, Toast, Button, Modal, Flex } from 'antd-mobile';
import { PayVip, QueryPayVip, pay } from "@/api/wx/wxpay";
import { R } from "@/assets/js/dict.js";
import { detailsInfo, previewPict, logout as logoutOfParent } from "@/api/login.js"
import { getParentDetails } from '@/api/parent/parent.js'

import { createForm } from 'rc-form'
import vip from "@/assets/img/VIP.svg"
import novip from "@/assets/img/NoVIP.svg"

import './myOfParent.scss';

import header from "@/assets/svg/header.svg"
import { Link } from 'react-router-dom';

import { getListStudent, getStudentDetails } from "@/api/parent/chilDinformation.js"

const confirm = Modal.alert;


function MyOfParent (props) {
    const [userInfoDetailsObject, setUserInfoDetailsObject] = useState({})
    let [selectedTab, setSelectedTab] = useState('index'); // 相当于 this.state
    let [childrensList, setChildrensList] = useState([]); // 孩子列表信息
    let [hidden] = useState(false); // 相当于 this.state
    let [userInfo, setUserInfo] = useState(JSON.parse(sessionStorage.getItem('userInfo')));
    const { getFieldProps } = props.form;

    console.log('props ---------->>>', props);



    /**
     * 退出登录
     */
    function logout () {
        sessionStorage.removeItem('userInfo');
        sessionStorage.removeItem("roleVal");
        localStorage.removeItem("token");
        props.history.push("/login/PARENT");
        logoutOfParent((res) => {
        });
    }

    //购买vip
    function buyVip () {

        //进入支付会员费的页面
        props.history.push("/payOfVip");
    }

    const vipShow = () => {
        if (userInfo.is_vip) {
            return (<div className="vip-box">
                <strong>{userInfo.username}</strong>
                <p>
                    <img src={vip} className="vip-icon" />
                    <strong>会员到期日期：{userInfo.vip_limit}</strong>
                </p>
            </div>);
        } else {
            return (
                <div className="vip-box">
                    <strong>{userInfo.username}</strong>
                    <p><img src={novip} className="vip-icon" /><strong>您还不是会员，暂不具备招聘家教资格</strong></p>
                    <Button type="primary" onClick={buyVip} size="small">成为会员</Button>
                </div>);
        }

    };

    useEffect(() => {
        // 查看家长个人信息 GET
        let postData = {};
        postData.parent_id = userInfo.id;

        getParentDetails(postData).then(res => {
            if (res.code == '000000') {
                console.log('res -------->>>', res);
                setUserInfoDetailsObject(res.responseData)
            }
        }).catch(err => {

        })
    }, []);


    function FunctionBlock () {
        console.log('my ----->>>', props);
        return (
            <li>
                <Link to="/studentList">
                    <i className="icon addStudent" />
                    学生列表
                </Link>
            </li>
        )
    }

    return (
        <div className="my-Of-parent">
            <div className="page-title my-Of-parent-tit">
                <NavBar
                    mode="light"
                >
                    我的
                </NavBar>
            </div>
            <div className="page-content my-Of-parent-con">
                <div className="my-icon-bg">
                    <div>
                        {
                            userInfoDetailsObject.photo ? <img src={previewPict(userInfoDetailsObject.photo)} /> : <img src={header} />
                        }

                        <div>

                            {vipShow()}
                        </div>
                    </div>
                    <ul>
                        <li>
                            <Link to="/userInfoParent">
                                <i className="icon underway" />
                                个人信息
                            </Link>
                        </li>
                        {FunctionBlock()}
                    </ul>
                </div>

                <ol className="my-Of-parent-list">
                    {/* <li>
                        <i className="icon phone" />
                        <span>手机</span>
                        <Icon type={'right'} />
                    </li>*/}
                    {/* <li>
                        <i className="icon address" />
                        <span>地址</span>
                        <Icon type={'right'} />
                    </li> */}
                    <li>
                        <Link to="/commonPoblem">
                            <i className="icon helps"></i>
                            <span>常见问题解答</span>

                            <Icon type={'right'} />
                        </Link>
                    </li>
                    <li>
                        <Link to="/customerService">
                            <i className="icon customerService"></i>
                            <span>客服中心</span>

                            <Icon type={'right'} />
                        </Link>
                    </li>
                    {/* <li>
                        <Link to="/help">
                            <i className="icon helps"></i>
                            <span>帮助</span>

                            <Icon type={'right'} />
                        </Link>
                    </li> */}
                </ol>
                
                <Flex justify="center" direction="row" wrap="wrap">
                    <Flex.Item><Button onClick={logout} type="primary" style={{ margin: '5%' }}>退出登录</Button></Flex.Item>
                </Flex>
            </div>
        </div>
    );
}

MyOfParent = createForm()(MyOfParent);

export default withRouter(MyOfParent);